<template>
  <div
    class="flex"
    style="align-items: flex-start; position: relative; padding-right: 232px"
  >
    <el-card style="margin-bottom: 24px; flex: 1" shadow="never">
      <div class="series-layout" style="min-height: calc(100vh - 260px)">
        <el-form
          ref="campaignForm"
          :model="campaignForm"
          :rules="campaignRules"
          label-position="top"
          style=""
          class="series-form"
          size="small"
        >
          <div class="currency-box">
            <cell-header title="结算币种" style="padding-bottom: 20px" />
            <el-form-item style="margin-bottom: 40px">
              <div v-if="currenType === 'RMB'" class="currency-list flex">
                {{ unit }}
                <div
                  class="currency-item flex pointer active"
                  @click="handleChagneCurrency(currencyList[0].currency)"
                >
                  <i class="el-icon-success item-icon"></i>
                  <div class="item-img">
                    <img :src="currencyList[0].img" />
                  </div>
                  <div class="item-main">
                    <p class="item-title webfont-Medium">
                      {{ currencyList[0].title }}
                    </p>
                    <p class="item-info">{{ currencyList[0].sec }}</p>
                  </div>
                </div>
              </div>
              <div v-if="currenType === 'USD'" class="currency-list flex">
                {{ unit }}
                <div
                  class="currency-item flex pointer active"
                  @click="handleChagneCurrency(currencyList[1].currency)"
                >
                  <i class="el-icon-success item-icon"></i>
                  <div class="item-img">
                    <img :src="currencyList[1].img" />
                  </div>
                  <div class="item-main">
                    <p class="item-title webfont-Medium">
                      {{ currencyList[1].title }}
                    </p>
                    <p class="item-info">{{ currencyList[1].sec }}</p>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>

          <!-- 选择证书及ORG -->
          <div>
            <cell-header title="证书设置" style="padding-bottom: 22px" />
            <el-form-item label="选择证书" style="margin-bottom: 40px">
              <el-cascader
                v-model="campaignForm.uuAndOrgId"
                :options="ORGListCopy"
                style="width: 540px"
                @change="changeUuIdAndOrgId"
              ></el-cascader>
            </el-form-item>
          </div>

          <el-form-item
            v-show="
              campaignForm.campaignGroupId ||
              campaignForm.campaignGroupId === 0 ||
              campaignForm.uuAndOrgId.length
            "
            label="选择应用"
            prop="adamId"
          >
            <el-select
              :value="campaignForm.adamId"
              placeholder="请输入APP名称或APPID"
              no-match-text="无匹配数据,请重新输入"
              no-data-text="无匹配数据,请重新输入"
              filterable
              remote
              :remote-method="findKeyApp"
              :loading="serachLoading"
              clearable
              :class="campaignForm.adamId ? 'choose-app' : ''"
              @change="changeAPP"
              @clear="clearApp"
            >
              <i
                v-if="checkedApp.icon && checkedApp.put_on_shelves"
                slot="prefix"
                style="
                  padding-top: 6px;
                  display: inline-block;
                  border-radius: 2px;
                  overflow: hidden;
                "
              >
                <el-image
                  v-if="checkedApp.icon && checkedApp.put_on_shelves"
                  style="height: 20px; width: 20px"
                  :src="checkedApp.icon"
                  fit="cover"
                />
              </i>

              <el-option
                v-for="item in searchAppList"
                :key="item.adamId"
                :value="item.adamId"
                :label="item.appName"
                v-if="item.icon && item.put_on_shelves"
              >
                <p class="flex">
                  <span>{{ item.appName }}</span>
                  <el-image
                    v-if="item.icon"
                    style="height: 24px; width: 24px; border-radius: 4px"
                    :src="item.icon"
                    fit="cover"
                  />
                </p>
              </el-option>
            </el-select>
          </el-form-item>

          <template v-if="campaignForm.adamId">
            <!-- 选择广告投放位置 -->
            <el-form-item
              :key="campaignForm.adChannelType"
              label="选择广告投放位置"
            >
              <div class="ad-position">
                <!--搜索结果  -->
                <div
                  :class="
                    campaignForm.adChannelType == 'SEARCH'
                      ? 'ad-position-item active'
                      : 'ad-position-item '
                  "
                  @click="campaignForm.adChannelType = 'SEARCH'"
                >
                  <div class="po-lt" style="background-color: #eef6ff">
                    <div class="skeleton">
                      <div class="header-box flex">
                        <div
                          v-if="checkedApp.icon && checkedApp.put_on_shelves"
                          class="img"
                        >
                          <el-image
                            v-if="checkedApp.icon"
                            style="height: 100%; width: 100%"
                            :src="checkedApp.icon"
                            fit="cover"
                          />
                        </div>
                        <div v-if="!checkedApp.appName" class="info">
                          <span />
                          <span />
                        </div>
                        <div v-else class="info">
                          <p class="overflow-ellipsis">
                            {{ checkedApp.appName }}
                          </p>
                        </div>
                      </div>
                      <div class="main-box">
                        <div v-for="item in 3" class="img" />
                      </div>
                    </div>
                  </div>
                  <div class="po-rt a">
                    <p class="title">搜索结果</p>
                    <p class="info">
                      当用户搜索要下载App时，在搜索结果顶部推广你的App
                    </p>
                  </div>
                  <i class="el-icon-success" />
                </div>

                <!--搜索标签  -->

                <div
                  :id="DisPlayDisable ? 'display-disable' : ''"
                  :class="
                    campaignForm.adChannelType == 'DISPLAY'
                      ? 'ad-position-item active'
                      : 'ad-position-item '
                  "
                  @click="
                    () => {
                      if (DisPlayDisable) return false;
                      campaignForm.adChannelType = 'DISPLAY';
                    }
                  "
                >
                  <div class="po-lt">
                    <div class="skeleton">
                      <div v-for="item in 3" class="header-box flex">
                        <div v-if="checkedApp.icon" class="img">
                          <el-image
                            v-if="checkedApp.icon && item === 1"
                            style="height: 100%; width: 100%"
                            :src="checkedApp.icon"
                            fit="cover"
                          />
                        </div>
                        <div
                          v-if="checkedApp.appName && item == 1"
                          class="info"
                        >
                          <p class="overflow-ellipsis">
                            {{ checkedApp.appName }}
                          </p>
                        </div>
                        <div v-else class="info">
                          <span />
                          <span />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="po-rt">
                    <p class="title">“搜索”标签</p>
                    <p class="info">
                      当用户访问“搜索”标签时，在推荐App列表的顶部推广你的App
                    </p>
                  </div>
                  <i class="el-icon-success" />
                </div>
              </div>
            </el-form-item>
            <!-- 选择投放国家/地区  -->
            <!-- 搜索标签时不能选择 -->
            <el-form-item prop="countriesOrRegions">
              <div slot-name="label" class="label address flex">
                <span
                  >选择投放国家/地区 &nbsp;&nbsp;&nbsp;({{
                    campaignForm.countriesOrRegions.length
                  }})</span
                >
              </div>
              <country-select
                v-model="campaignForm.countriesOrRegions"
                :cities="cities"
                :disabled="!campaignForm.adamId"
                :placeholder="
                  campaignForm.adamId ? '请选择投放国家/地区' : '请先选择应用'
                "
                multiple
              />
            </el-form-item>
            <!-- 广告系列名称 -->
            <el-form-item key="campaignForm" label="广告系列名称" prop="name">
              <el-input v-model="campaignForm.name" placeholder="请输入" />
            </el-form-item>
            <!-- 每日预算上限 -->
            <el-form-item
              key="dailyBudgetAmountNub"
              prop="dailyBudgetAmountNub"
            >
              <div slot-name="label" class="label">
                <span>每日预算</span>
                <el-popover
                  placement="top-start"
                  title="每日预算"
                  width="300"
                  trigger="hover"
                  :content="text2"
                >
                  <i
                    slot="reference"
                    class="iconfont icon-question-circle"
                    style="font-weight: 400; margin-left: 8px"
                  />
                </el-popover>
              </div>

              <amount-input
                v-model="campaignForm.dailyBudgetAmountNub"
                :precision="2"
                :controls="false"
                placeholder="请输入"
              />
            </el-form-item>

            <el-form-item
              v-if="campaignForm.adChannelType == 'SEARCH'"
              key="NegativeKeyword"
            >
              <div slot-name="label" class="label">
                <span>广告系列屏蔽词(可选)</span>
                <el-popover
                  placement="top-start"
                  title="广告系列否定关键词"
                  width="300"
                  trigger="hover"
                  :content="text3"
                >
                  <i
                    slot="reference"
                    class="iconfont icon-question-circle"
                    style="margin-left: 8px"
                  />
                </el-popover>
              </div>
              <el-button
                v-show="!campaignNegativeKeyword.length"
                class="add-btn"
                style="margin-left: 2px; font-size: 14px"
                @click="worldShow = true"
              >
                <span style="font-size: 14px">添加</span>
              </el-button>
              <el-button
                v-show="campaignNegativeKeyword.length"
                class="add-btn"
                style="margin-left: 2px"
                @click="worldShow = true"
              >
                <p class="flex">
                  <span style="font-size: 14px"
                    >已添加{{ campaignNegativeKeyword.length }}个屏蔽词</span
                  >
                  <span><em style="font-size: 14px">添加</em></span>
                </p>
              </el-button>
            </el-form-item>
          </template>
          <el-form-item style="padding-top: 10px">
            <el-button
              v-if="campaignForm.adamId"
              type="success"
              class="defult"
              size="small"
              style="padding: 9px 26px"
              @click="goToNext"
              >下一步</el-button
            >
          </el-form-item>
        </el-form>
        <word-box
          title="广告系列屏蔽词"
          :visible.sync="worldShow"
          :words-list="campaignNegativeKeyword"
          @handleSub="subWordData"
        />
      </div>
    </el-card>
    <slot />
  </div>
</template>

<script>
import wordBox from "@/components/word-box.vue";
import cellHeader from "@/components/cell-header.vue";
import amountInput from "@/components/amountInput/index.vue";
import countrySelect from "@/components/countrySelect/index.vue";
import {
  searchApps, // 搜索app
  isEmptyName, // 去重
} from "@/api/create.js";

import { mapActions } from "vuex";

// var appTimer = undefined;
export default {
  name: "CreateSeries",
  components: {
    wordBox,
    cellHeader,
    amountInput,
    countrySelect,
  },
  data() {
    // 验证每日预算上限
    const validateDailyBudgetAmountNub = (rule, value, callback) => {
      if (!value || value * 100 < 1) {
        callback(new Error("你的每日预算上限必须至少为0.01"));
      } else {
        callback();
      }
    };

    // 验证总预算
    const validatebudgetAmountNub = (rule, value, callback) => {
      if (!value) {
        callback(new Error("你的预算必须至少为 0.01 且不得超过 20,000,000.00"));
      } else if (value > 20000000 || value * 100 < 1) {
        callback(new Error("你的预算必须至少为 0.01 且不得超过 20,000,000.00"));
      } else {
        callback();
      }
    };

    // 验证广告系列名称
    const validateName = async (rule, value, callback) => {
      if (!value) {
        callback(new Error("不能为空"));
      } else {
        const query = {
          campaignName: value,
          orgId: "",
          appid: "",
          currencyType: this.$store.state.user.unit,
          teamId: this.$store.state.team.teamId,
        };

        // console.log(this.campaignForm.uuAndOrgId, '你好orgid')
        query.aid = this.campaignForm.uuAndOrgId[0];
        query.orgId = this.campaignForm.uuAndOrgId[1];

        const res = await isEmptyName(query);
        if (res.data.code === 20000) {
          if (!res.data.data || res.data.data.length === 0) {
            callback();
          } else {
            callback(new Error("广告系列名称重复"));
          }
        } else {
          callback(new Error("广告系列名称重复"));
        }
      }
    };
    return {
      reLoad: false,
      currencyList: [
        {
          title: "人民币",
          img: require("@/assets/images/create/rmb.png"),
          currency: "RMB",
          sec: "可以投放包含「中国大陆」在内的61个国家或地区，需预付6%的税点",
        },
        {
          title: "美元",
          img: require("@/assets/images/create/usd.png"),
          currency: "USD",
          sec: "可以投放除「中国大陆」外的60个国家或地区，无需预付税点",
        },
      ],
      text: "你愿意在广告系列上花费的金额，这是广告系列初始设置过程中必须完成的一个步骤。你可以随时增加你的预算。在你的广告系列启动日期之后，将无法减少预算。但你可以将其暂停，用较低的预算创建一个新的广告系列",
      text2:
        "每日预算是你希望在一个月内每天花费在广告系列上的平均金额。你的每月支出不会超过每日预算乘以一个日历月的平均天数。在有机会获得更多下载次数的日子里，你的支出可能会超出每日预算你的广告系列会持续根据每日预算金额进行每月支出，除非你暂停、移除广告系列或设置结束日期。如果你设置了结束日期，则你支出的费用不会超过广告系列总天数乘以每日预算。你可以随时调整每日预算。",
      text3:
        "屏蔽词可防止你的广告在这些词的搜索结果中显示。例如，如果你添加“免费”作为否定关键词，则你的广告不会出现在使用“免费”这个词执行的搜索中。你添加的否定关键词仅适用于此广告组。在广告系列级别设置否定关键词，以将其应用于所有广告组。",
      ORGList: [],
      serialLoading: false,
      serialOptions: [], // 全部广告系列组
      worldShow: false,
      serachLoading: false, //
      checkedApp: {
        icon: undefined,
        put_on_shelves: undefined,
        appName: undefined,
      }, // 选中的app
      searchAppList: [
        {
          icon: undefined,
        },
      ],
      DisPlayDisable: false, // 搜索标签不能点击

      // 表单选择的
      campaignForm: {
        campaignGroupId: "", // 选中的广告系列组Id
        uuAndOrgId: [], // 选中的证书Id与OrgID
        adamId: undefined, // 选中appid
        adChannelType: "SEARCH", // 广告投放位置
        name: undefined, // 广告系列名称
        countriesOrRegions: [], // 投放国家
        dailyBudgetAmountNub: undefined, // 每日预算
      },
      campaignNegativeKeyword: [], // 广告系列屏蔽词语
      // 可以选择的城市；
      cities: [],
      campaignRules: {
        appInfo: [
          {
            required: true,
            message: "请选择app",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入广告系列名称",
            trigger: "blur",
          },
          {
            validator: validateName,
            trigger: "blur",
          },
        ],
        countriesOrRegions: [
          {
            required: true,
            message: "请选择投放国家/地区",
            trigger: "change",
          },
        ],
        dailyBudgetAmountNub: [
          {
            validator: validateDailyBudgetAmountNub,
            trigger: "blur",
          },
        ],
      },
    };
  },

  computed: {
    ORGListCopy() {
      if (this.ORGList.length > 0) {
        const arr = this.ORGList.map((item) => {
          item.label = item.secretName;
          item.value = item.uuid;
          item.disabled =
            item.roleName === "invalid_client" ||
            item.roleName === "API Read Only";
          if (item.org.length) {
            item.children = item.org.map((v) => {
              v.label = v.orgName;
              v.value = v.orgId;
              v.disabled =
                v.roleName === "invalid_client" ||
                v.roleName === "API Read Only";
              return v;
            });
          }
          return item;
        });
        return arr;
      } else {
        return [];
      }
    },
    currenType() {
      return this.$store.state.user.unit;
    },
  },
  watch: {
    "campaignForm.countriesOrRegions": function (newVal, oldVal) {
      if (newVal.indexOf("CN") !== -1) {
        this.campaignForm.adChannelType = "SEARCH";
        this.DisPlayDisable = true;
      } else {
        this.DisPlayDisable = false;
      }
    },
    "campaignForm.campaignGroupId": function (newVal, oldVal) {
      if (this.$route.query.type === "common") return false;
      if (this.campaignForm.campaignGroupId === "") {
        this.campaignForm.serialName = "默认广告系列组";
      } else {
        const index = this.serialOptions.findIndex((item) => {
          return item.id === this.campaignForm.campaignGroupId;
        });
        if (index > -1)
          return (this.campaignForm.serialName =
            this.serialOptions[index].name);
      }
    },
    serialOptions: function (newVal, oldVal) {
      if (this.$route.query.type === "common") return false;
      if (this.campaignForm.campaignGroupId === "") {
        this.campaignForm.serialName = "默认广告系列组";
      } else {
        const index = this.serialOptions.findIndex((item) => {
          return item.id === this.campaignForm.campaignGroupId;
        });
        if (index > -1)
          return (this.campaignForm.serialName =
            this.serialOptions[index].name);
      }
    },
  },

  mounted() {
    // if (this.$route.query.type === 'common') {
    //   this.getAllAc()
    // }
    // else {
    //   this.getAllSerial()
    // }
    this.getAllAc();
    this.$refs["campaignForm"].resetFields();
    if (localStorage.getItem("series-DATA")) {
      const obj = JSON.parse(localStorage.getItem("series-DATA"));
      this.campaignForm = obj.campaignForm; // 表单选择的
      this.checkedApp = obj.appInfo; // 选中的app
      this.campaignNegativeKeyword = obj.campaignNegativeKeyword; // 添加的屏蔽词语
      this.cities = obj.cities;
      this.searchAppList = obj.searchAppList;
    }
  },
  // 离开此页面的时候缓存数据
  beforeRouteLeave(to, form, next) {
    if (to.name === "CreateGroup" || to.name === form.name) {
      // 如果是去创建广告组的页面  就把选中的数据存起来;
      const obj = {
        cities: this.cities,
        campaignForm: this.campaignForm,
        campaignNegativeKeyword: this.campaignNegativeKeyword,
        appInfo: this.checkedApp,
        searchAppList: this.searchAppList,
      };
      localStorage.setItem("series-DATA", JSON.stringify(obj));
      next();
    } else {
      // 如果不是就把选择的数据删除掉
      if (localStorage.getItem("series-DATA")) {
        localStorage.removeItem("series-DATA");
      }
      next();
    }
  },

  methods: {
    changeUuIdAndOrgId(val) {
      console.log(val, "你好啊");
    },

    async getAllSerial() {
      this.serialLoading = true;
      const obj = {
        currencyType: this.$store.state.user.unit,
        teamId: this.$store.state.team.teamId || "",
      };
      try {
        const res = await this.$store.dispatch("overview/getAllSerial", obj);
        this.serialLoading = false;
        if (res.data.code === 20000) {
          this.serialOptions = res.data.data;
        } else {
          return false;
        }
      } catch (e) {
        this.serialLoading = false;
        return false;
      }
    },

    handleChagneCurrency(unit) {
      // 如果分区没变化 不做改变
      if (unit === this.$store.state.user.unit) return false;
      // 改变了

      this.$store.commit("user/SET_UNIT", unit);
      const country = this.$store.state.user.unit === "RMB" ? "CN" : "US";

      this.searchAppList = [];
      this.serialOptions = [];
      this.ORGList = [];
      this.campaignForm = {
        uuAndOrgId: [], // 选中的证书Id与OrgID
        adamId: undefined, // 选中appid
        adChannelType: "SEARCH", // 广告投放位置
        name: undefined, // 广告系列名称
        countriesOrRegions: [], // 投放国家
        dailyBudgetAmountNub: undefined, // 每日预算
      };
      this.cities = [];
      this.checkedApp = {
        icon: undefined,
        put_on_shelves: undefined,
        appName: undefined,
      }; // 选中的app
      this.$forceUpdate();
      this.getAllAc();

      // this.reLoad = true;
      // const loading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      // setTimeout(() => {
      //   this.reLoad = false;
      //   loading.close()
      // }, 1200)
    },

    // 获取所有证书及ORG
    getAllAc() {
      this.$store
        .dispatch("overview/getAllAc", {
          currencyType: this.$store.state.user.unit,
          teamId: this.$store.state.team.teamId || "",
        })
        .then((res) => {
          if (!res.length) {
            this.$message.closeAll();
            const pushFlag = !this.$isReadOnly(
              this.$store.state.user.userInfo.roleName
            );

            const msgInfo = pushFlag
              ? `<p class="flex" style="width:320px">
               <span>请先上传证书</span>
               <em class="pointer">去绑定</em>
             </p>`
              : `<p class="flex" style="width:320px">
               <span>请先上传证书</span>
             </p>`;

            const message = this.$message({
              type: "error",
              dangerouslyUseHTMLString: true,
              message: msgInfo,
            });

            if (pushFlag) {
              message.$el.querySelector("em").onclick = () => {
                this.$message.closeAll();
                this.$router.push("/user/zs_bind");
              };
            }
            return false;
          } else {
            this.ORGList = res;
          }
        });
    },

    goToNext() {
      this.$refs["campaignForm"].validate((valid) => {
        if (valid) {
          this.$router.push({
            name: "CreateGroup",
            query: { ...this.$route.query },
          });
        } else {
          return false;
        }
      });
    },

    // 查找app
    async findKeyApp(str) {
      this.$message.closeAll();
      let regs = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g;
      if (!str) return;
      if (regs.test(str))
        return this.$message.error("请输入中文、英文、数字和空格。");
      // 设置加载中
      this.serachLoading = true;
      // 请求搜索结果数据
      setTimeout(async (r) => {
        const res = await searchApps(str);
        // 加载效果结束
        this.serachLoading = false;

        if (!res.data || res.data.code !== 20000) {
          // 错误处理
          this.searchAppList = [];
          // this.$message.closeAll()
          this.$message.error(res.data.message || "后台数据出现错误，请重试");
        } else {
          // 如果有数据
          const { data } = res.data;
          const unit = this.$store.state.user.unit;

          // const arr = []
          // data.forEach(item => {
          //   if (unit === 'USD') {
          //     if (item.countryOrRegionCodes[0] !== 'CN' || (item.countryOrRegionCodes[0] === 'CN' && item.countryOrRegionCodes
          //       .length > 1)) return arr.push(item)
          //   } else {
          //     if (item.countryOrRegionCodes.indexOf('CN') !== -1) return arr.push(item)
          //   }
          // })
          this.searchAppList = JSON.parse(JSON.stringify(data));

          this.$forceUpdate();
        }
      }, 2000);
    },

    // 应用改变的函数
    changeAPP(data) {
      if (!data) {
        return false;
      }
      const index = this.searchAppList.findIndex((item) => {
        return item.adamId === data;
      });

      this.checkedApp = JSON.parse(JSON.stringify(this.searchAppList[index]));
      this.campaignForm.adamId = this.searchAppList[index].adamId;

      this.campaignForm = {
        ...this.campaignForm,
        adChannelType: "SEARCH", // 广告投放位置
        name: undefined, // 广告系列名称
        countriesOrRegions: [], // 投放国家
        dailyBudgetAmountNub: undefined, // 每日预算
      };
      this.campaignNegativeKeyword = [];

      const cities = this.searchAppList[index].countryOrRegionCodes;
      this.cities = cities;
    },
    // 清空应用的函数
    clearApp() {
      this.$confirm("您当前的所有选择都会被重置", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "defult",
        confirmButtonClass: "defult",
      })
        .then(() => {
          this.searchAppList = [];
          this.campaignForm = {
            uuAndOrgId: [], // 选中的证书Id与OrgID
            adamId: undefined, // 选中appid
            adChannelType: "SEARCH", // 广告投放位置
            name: undefined, // 广告系列名称
            countriesOrRegions: [], // 投放国家
            dailyBudgetAmountNub: undefined, // 每日预算
          };
          this.cities = [];
          this.checkedApp = {
            icon: undefined,
            put_on_shelves: undefined,
            appName: undefined,
          }; // 选中的app
          this.$forceUpdate();
        })
        .catch(() => {});
    },
    subWordData(data) {
      this.campaignNegativeKeyword = data;
    },
  },
};
</script>

<style lang="scss" scoped="true">
@import "~@/styles/variables.scss";

#display-disable {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  cursor: not-allowed;
}

.series-layout {
  h2 {
    font-size: 2rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 1rem;
  }

  .currency-box {
    ::v-deep.el-form-item__content {
      max-width: 900px;
      width: 900px;
    }

    .currency-list {
      justify-content: flex-start;

      .currency-item {
        width: 386px;
        position: relative;
        justify-content: flex-start;
        padding: 16px 12px;
        background: rgba(196, 196, 196, 0.1);
        border: 1px solid #d9d9d9;
        box-sizing: border-box;
        border-radius: 2px;

        &.active {
          border: 1px solid #24bebe;
          background-color: #ffffff;

          .item-icon {
            display: block;
          }
        }

        &:first-of-type {
          margin-right: 24px;
        }

        .item-icon {
          position: absolute;
          top: 12px;
          right: 12px;
          display: none;
          color: #24bebe;
          font-size: 20px;
        }

        .item-img {
          margin-right: 16px;
          height: 80px;
          width: 80px;
          padding-top: 16px;
          text-align: center;

          background: rgba(51, 64, 74, 0.04);
          border-radius: 4px;

          img {
            width: 80%;
            height: auto;
          }
        }

        .item-main {
          margin-bottom: -12px;
        }

        .item-title {
          font-size: 14px;
          line-height: 14px;
          color: #000000;
        }

        .item-info {
          padding-top: 12px;
          width: 217px;
          font-size: 12px;
          line-height: 22px;
          text-align: justify;
          color: #acb6c2;
        }
      }
    }
  }

  .series-form {
    .el-select,
    .el-form-item__content,
    .el-input,
    .el-input__inner {
      width: 640px;
    }

    .ad-position {
      display: flex;
      align-items: center;

      .ad-position-item {
        flex: 1;
        display: flex;
        position: relative;
        justify-content: space-between;
        padding: 18px;
        margin-right: 30px;
        background: #ffffff;
        border: 1px solid #eaeaea;
        border-radius: 2px;
        max-width: 386px;
        cursor: pointer;

        .el-icon-success {
          font-size: 20px;
          color: $mainColor1;
          position: absolute;
          top: 16px;
          right: 16px;
          display: none;
        }

        &.active {
          border: 1px solid $mainColor1;

          .el-icon-success {
            display: block;
          }
        }

        .po-lt {
          width: 88px;
          height: 88px;
          background: rgba(51, 64, 74, 0.06);
          border-radius: 4px;
          margin-right: 14px;
          padding: 6px;
          padding-bottom: 2px;

          .main-box {
            height: 46px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .img {
              width: 30%;
              height: 100%;
              background-color: #b9d5ef;
              border-radius: 4px;
            }
          }

          .header-box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 6px;

            &:first-of-type {
              .img,
              .info span {
                background-color: #b9d5ef !important;
              }
            }

            .img {
              height: 22px;
              width: 22px;
              margin-right: 4px;
              border-radius: 4px;
              background: rgba(51, 64, 74, 0.1);
            }

            .info {
              flex: 1;
            }

            .info p {
              font-size: 10px;
              line-height: 12px;
              width: 50px;
              max-width: 100%;
            }

            .info span {
              height: 4px;
              width: 40%;
              border-radius: 4px;
              margin-bottom: 4px;
              background: rgba(51, 64, 74, 0.1);
              display: block;

              &:first-of-type {
                width: 60%;
              }
            }
          }
        }

        .po-rt {
          width: 248px;

          .title {
            color: #000000;
            font-size: 16px;
            margin-bottom: 12px;
          }

          .info {
            font-size: 14px;
            font-weight: 400;
            color: rgba(172, 182, 194, 1);
            line-height: 18px;
          }
        }
      }
    }
  }
}

.choose-app {
  ::v-deep .el-input__inner {
    padding-left: 30px !important;
  }
}
</style>
